<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>新闻信息表</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{../layui/css/layui.css}" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>

<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
  </div>
</script>

<!-- 分页组件 -->
<div>
    <div id="page_container"></div>
</div>

<script>
layui.use(['table','layedit','form'], function(){
	  var table = layui.table;
	  var layedit = layui.layedit
	  ,$ = layui.jquery;
	  var form = layui.form   //form表单
	  var index = layedit.build("textarea", "content");
	  
//执行一个 table 实例
	table.render({
	  elem: '#demo'
	  ,height: 'full-80'
	  //,cellMinWidth: 50
	  ,url: 'list' //数据接口
	  ,even:true	
	  //,page: true
	  //,title: '新闻表'
	  ,limit:20
	  ,toolbar:'#toolbarDemo'  //开启工具栏
	  ,cols: [
		  [ //表头
	    {field: 'nid', title: '编号', sort: true, fixed: 'left', width:200}
	    ,{field: 'title', title: '标题'}
	    ,{field: 'source', title: '来源'}
	    ,{field: 'topic', title: '栏目'}
	    ,{field: 'createtime', title: '创建时间'}
	    ,{field: 'content', title: '新闻内容'}
	    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	 	 ]
		]
	});
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		//目的:通过发送ajax请求得到栏目数据,虽然得到,但点击"添加"按钮触发事件之后发送ajax请求,打开一个表单又属于一个
		//事件,不可对后续事件造成影响(得到的数据现不可用,后续可以试试回调函数)
/* 		layui.$.ajax({  
			url: 'topics'
			,type: 'get'
		});   */
		
		layer.open({
			type:1,
			title:'添加新闻',
			area: ['1100px', '850px'],
			anim: 0,
			skin: 'layui-layer-molv',
			content:layui.$('#add')
		});
		
       //上传图片,必须放在 创建一个编辑器前面
       layedit.set({
           uploadImage: {
                url: 'uploadFile' //接口url
               ,type: 'post' //默认post
           }
       });

	  var index = layedit.build('textarea', {
		    //hideTool: ['image']  //Array  不显示编辑器工具栏，一般用于隐藏默认配置的工具bar
		    //,tool: []			   //Array	重新定制编辑器工具栏，如： tool: ['link', 'unlink', 'face']
		    height: 240           //Number 设定编辑器的初始高度
		  });
	  var editContent = layedit.getContent(index)
 	  //layedit.sync(index)   //将文本编辑器中的内容 获取到textarea中
	  });
	});
</script>


<!------------------------------------------------ 添加 --------------------------------------------------->
<form id="add" class="layui-form" action="add" lay-filter="example" method="post" hidden="true">
  <div class="layui-form-item">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入新闻标题" class="layui-input">
    </div>
  </div>  
  <div class="layui-form-item">
    <label class="layui-form-label">新闻来源</label>
    <div class="layui-input-block">
      <input type="text" name="source" lay-verify="text" autocomplete="off" placeholder="请输入新闻来源" class="layui-input">
    </div>
  </div> 
   
 <div class="layui-form-item">
    <label class="layui-form-label">所属新闻栏目</label>
    <div class="layui-input-block">
  
       <select name="ntid" lay-filter="aihao"> 
<!--         <option th:attr="value=@{${topic.ntid}}"><span th:text="${topic.tname}"></span></option> -->
        <option th:each="topic,userStat:${topics}" th:value="${topic.ntid}" th:text="${topic.tname}"></option>
      </select> 
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期选择</label>
      <div class="layui-input-block">
        <input type="text" name="createtime" id="date1" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  
<!------------------------------------------------ 添加***文本编辑器 -------------------------------------------->
<!--   <-- body内加入 textarea id为textarea--> 
  <div class="layui-form-item">
    <label class="layui-form-label">新闻正文</label>
    	<textarea id="textarea" style="display:none" name="content" lay-verify="content"></textarea>
<!-- 		<div class="site-demo-button" style="margin-top: 20px;">
  			<button class="layui-btn site-demo-layedit" data-type="content">获取编辑器内容</button>
  		</div>	 -->
    <div class="layui-input-block">
    </div>
  </div> 

  <div class="layui-form-item">
    <div class="layui-input-block">
<!--       <button class="layui-btn" lay-submit lay-filter="formDemo" >确认添加</button> -->
      <button class="layui-btn site-demo-layedit" data-type="content">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<!------------------------------------------------ 查看详情 -------------------------------------------------->
<!-- <form id="news_detail" class="layui-form layui-form-pane"  lay-filter="formTest"  hidden="true">
   <input type="hidden" name="nid" lay-verify="title" autocomplete="off" class="layui-input">
  <div class="layui-form-item">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入新闻标题" class="layui-input">
    </div>
  </div>  
  <div class="layui-form-item">
    <label class="layui-form-label">新闻详情</label>
    <div class="layui-input-block">
      <input type="text" name="pname" lay-verify="title" autocomplete="off" class="layui-input">
      <span lay-verify="title"></span>
    </div>
  </div>
</form> -->

 <!------------------------------------------------ 修改 ----------------------------------------------------->
<form id="update" class="layui-form" action="update" lay-filter="updateData" method="post" hidden="true">
  <input type="hidden" name="nid" lay-verify="title" autocomplete="off" class="layui-input">
  <div class="layui-form-item">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入新闻标题" class="layui-input">
    </div>
  </div>  
  <div class="layui-form-item">
    <label class="layui-form-label">新闻来源</label>
    <div class="layui-input-block">
      <input type="text" name="source" lay-verify="text" autocomplete="off" placeholder="请输入新闻来源" class="layui-input">
    </div>
  </div>  
 
 <div class="layui-form-item">
    <label class="layui-form-label">所属新闻栏目</label>  
    <div class="layui-input-block">
       <select name="ntid" lay-filter="aihao"> 
        <option th:each="topic,userStat:${topics}" th:value="${topic.ntid}" th:text="${topic.tname}"></option>
      </select> 
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期选择</label>
      <div class="layui-input-block">
        <input type="text" name="createtime" id="date2" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">新闻正文</label>
    	<textarea id="textarea2" style="display:none" name="content" lay-verify="content"></textarea>
    <div class="layui-input-block">
    </div>
  </div> 
  

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- 动态加载下拉框数据 -->
<!-- <script type="text/javascript">
var $ = layui.jquery;
$.ajax({ 
	url:'list2', 
	dataType:'json',
	type:'post', 
	success:function(data){ 
		$.each(data,function(index,item){ 
			$('#selectID').append(new Option(item.name,item.id));//往下拉菜单里添加元素
		}) //form.render();//菜单渲染 把内容加载进去 
	} 
})
</script> -->

<!---------------------------------------------- 分页栏目 --------------------------------------------------->
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  //执行一个laypage实例
  laypage.render({
    elem: 'page_container' 
    	,count: 26
    	,skip: true //开启跳页
        ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
        ,jump: function(obj,first){
        	if(!first){
                layer.msg('第'+ obj.curr +'页', {offset: 'b'});
              }
        }
  });
});
</script>


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看新闻详情</a>
  <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript" th:inline="javascript">  //用javascript获取model中数据
layui.use(['table', 'form', 'layedit', 'laydate'], function(){
	  var form = layui.form   //form表单
	  ,layer = layui.layer  //弹出层
	  ,layedit = layui.layedit  //文字编辑器
	    var a = [[${data}]]
	  ,laydate = layui.laydate;  //日期 
	  
	  //日期
	  laydate.render({   //添加时的日期选择
	    elem: '#date1'
	   	,theme: 'molv'
	   	,value: new Date  //默认为当时时间
	  });
	  laydate.render({   //修改时的日期选择
		elem: '#date2'
	  });
	
  var table = layui.table;
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    var nid = data.nid;
    
    if(obj.event === 'detail'){
    	window.open("/NewsManagement/newsDetail?nid="+nid+"","_self")
    	/* //layer.alert(JSON.stringify(data));
        //layer.msg('ID：'+ data.nid + ' 的查看操作');
        form.val("formTest",data);
        
        layer.open({
        	type:1,
        	title:'新闻详情',
        	area: ['1400px', '850px'],
        	anim:5,
        	skin:'layui-layer-lan',
        	content:layui.$('#news_detail'),	
        	//content:layui.msg('ID：'+ data.nid + ' 的查看操作'),
        }) */
  	}else if(obj.event === 'update'){
    	//layer.alert(JSON.stringify(data));
    	//1.获取这行数据
    	//2.填充form
    	form.val("updateData",data);   
    	/**1.首先需要获取复选框原始的值
    	2.将这个值在页面上展示
    	*/
    	var topic2=data.ntid;
    	
    	var t = [[${topics}]]   //通过model名,在js中获取其中数据
    	
    	for(var i=0; i<t.length; i++){  //在js中循环便利集合
    		if(topic2==[[@{t[i].tname}]]){ //若改之前的栏目名与model中的数据相等,取它对应的id,传到后台
    			layui.$("#ntid").val([[@{t[i].tnid}]]);
    			break;
    		}
    	}
    	
    	form.render('select','topic2');   //表单渲染
    	
  	  var index2 = layedit.build('textarea2', {
		    //hideTool: ['image']  //Array  不显示编辑器工具栏，一般用于隐藏默认配置的工具bar
		    //,tool: []			   //Array	重新定制编辑器工具栏，如： tool: ['link', 'unlink', 'face']
		    height: 240           //Number 设定编辑器的初始高度
		  }); 
    	
    	layer.open({
    		type:1,
			title:'修改新闻信息',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-lan',
			content:layui.$('#update'),	
    	}) 
    } else if(obj.event === 'del'){
      layer.confirm('是否删除数据', function(index){
    	  layui.$.ajax({
              url: "delete",
              type: "POST",
              data:{"nid":data.nid},
              dataType: "json",                
              success: function(data){            
              if(data==null){    
                 layer.msg(data.nid);
                 layer.msg("删除失败");                        
              }else{ 
                  layer.msg(data.nid);
                     //删除这一行
                  layer.msg("删除成功");   
                  obj.del();
                     //关闭弹框
                  }
              },
              error:function(){
            	  layer.closeAll();
                  parent.location.reload();
                  Load(); //删除完需要加载数据
                  //tableObj.reload(options); //重载表格
              },
    	  });
      });
    };
  });
});
</script>
</body>
</html>